<template>
  <div
    class="case-page"
    :id="uuid"
    style="
      font-family: Arial, sans-serif;
      padding: 34px 30px;
      background-color: #fff;
      height: 100%;
    "
  >
    <div
      style="
        padding: 30px 15px;
        background-color: #fff;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        font-size: 12px;
        box-sizing: border-box;
      "
    >
      <!-- 医院名称 -->
      <h1
        class="hospital-name"
        style="
          margin-bottom: 5px;
          text-align: center;
          font-size: 16px;
          margin-bottom: 20px;
        "
      >
        {{ info.title }}
      </h1>
      <h1
        class="hospital-name"
        style="text-align: center; font-size: 16px; margin-bottom: 20px"
      >
        {{ info.rxName }}
      </h1>

      <!-- 患者基础信息 -->
      <!-- 患者基础信息 -->
      <div
        class="patient-info"
        style="
          display: flex;
          flex-wrap: wrap;
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >姓名：</span
          >{{ info.patientName }}
          {{
            info.patientGender == 1
              ? '男'
              : info.patientGender == 2
              ? '女'
              : '未知'
          }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >年龄：</span
          >{{ info.ageYear }}年{{ info.ageMonth }}月
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >电话：</span
          >{{ info.phone }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >科室：</span
          >{{ info.deptName }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >诊号：</span
          >{{ info.visitNo }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >类型：</span
          >
          {{ info.visitType == 1 ? '初诊' : '复诊' }} ({{
            info.regType == 1 ? '普通' : '急诊'
          }})
        </div>
      </div>

      <div
        class="case-info"
        style="
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div
          class="info-item"
          style="
            display: flex;
            width: 100%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              width: 50px;
              display: block;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >最终诊断</span
          >：
          <ul
            style="
              width: calc(100% - 100px);
              margin-left: 10px;
              list-style: none;
              padding: 0;
            "
          >
            <li>{{ info.diagnosis }}</li>
          </ul>
        </div>
      </div>

      <div
        class="case-info"
        style="
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <table class="cdp-table" style="font-size: 12px; text-align: left">
          <thead>
            <tr style="line-height: 2">
              <th style="width: 22%">药品</th>
              <th style="width: 10%">用法</th>
              <th style="width: 10%">频率</th>
              <th style="width: 10%">用量/次</th>
              <th style="width: 10%">周期</th>
              <th style="width: 10%">总量</th>
              <th style="width: 28%">备注</th>
            </tr>
          </thead>
          <tbody
            v-for="(item, index) in info?.detailList"
            :key="index"
            style="line-height: 2"
          >
            <tr>
              <td colspan="7" v-if="!item.signature">{{ item.drugName }}</td>
              <td colspan="7" v-else>
                <img :src="item.signature" alt="" style="height: 50px;width: 50px;">
              </td>
            </tr>
            <tr>
              <td></td>
              <td>{{ item.usageCodeText }}</td>
              <td>{{ item.frequencyCodeText }}</td>
              <td>{{ item.dosage }}{{ item.dosageUnitText }}</td>
              <td>{{ item.cycle }}{{ item.cycleUnitText }}</td>
              <td>{{ item.totalOutQty }}{{ item.totalOutQtyUnitText }}</td>
              <td>{{ item.remark }}</td>
            </tr>
            <!-- <tr>
            <td colspan="7">
              <img
                style="height: 20px"
                src="https://file.zhiyizhen.cn/files/2025/09/11/057c012665d34ce5a056a3a336a10836.png"
                alt=""
              />
            </td>
          </tr> -->
          </tbody>
        </table>
      </div>
      <div
        class="case-info"
        style="
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div
          class="info-item"
          style="
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
          "
        >
          <span
            style="
              width: 52px;
              display: block;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >联系电话</span
          >：
          <div style="margin-left: 5px">{{ info.phone }}</div>
        </div>
        <div
          class="info-item"
          style="
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
          "
        >
          <span
            style="
              width: 52px;
              display: block;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >联系地址</span
          >：
          <div style="margin-left: 5px">{{ info.address }}</div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="footer" style="display: flex; flex-wrap: wrap">
        <div
          class="info-item"
          style="
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            width: auto;
          "
        >
          <span
            style="
              width: 65px;
              display: block;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >打印时间：</span
          >
          <div style="margin-left: 5px">{{ info.printTime }}</div>
        </div>
      </div>
      <!-- 底部信息 -->
      <div class="footer2" style="width: 180px; margin-left: auto">
        <div
          class="info-item"
          style="
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            width: 100%;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <span style="display: block">医生姓名：</span>
          <div
            class="img"
            v-if="info.signature"
            style="
              width: 120px;
              height: 40px;
              display: flex;
              justify-content: center;
            "
          >
            <img :src="info.signature" alt="" style="height: 40px" />
          </div>
          <div v-else>{{ info.doctorName }}</div>
        </div>
        <div
          class="info-item"
          style="
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            width: 100%;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <span style="display: block">完诊日期：</span>{{ info.diagnosisDate }}
        </div>
      </div>
      <img
        :src="qrCodeStr"
        v-if="qrCodeStr != ''"
        style="width: 76px; height: 76px; display: block; margin: 20px auto"
        alt=""
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import QRCode from 'qrcode';
const emit = defineEmits(['onCancel']);
interface InfoType {
  title: string;
  rxName: string;
  patientName: string;
  patientGender: number;
  ageYear: number;
  ageMonth: number;
  phone: string;
  deptName: string;
  visitNo: string;
  visitType: number;
  regType: number;
  diagnosis: string;
  address: string;
  printTime: string;
  signature?: string;
  doctorName: string;
  diagnosisDate: string;
  uuid: string;
}

interface GroupItemType {
  drugName: string;
  usageCodeText: string;
  frequencyCodeText: string;
  dosage: string | number;
  dosageUnitText: string;
  cycle: string | number;
  cycleUnitText: string;
  totalOutQty: string | number;
  totalOutQtyUnitText: string;
  remark: string;
}

const props = defineProps<{
  info: any;
  groupList: GroupItemType[];
  uuid: string;
}>();
const qrCodeStr = ref<any>(''); // 明确类型并初始化为 null
const onPrintQRCode = () => {
  //console.log('1111111111111');

  nextTick(() => {
    // 获取dom8元素
    const dom1 = document.querySelector('#dom1')?.getHTML() || '';
    const html = new DOMParser().parseFromString(dom1, 'text/html');
    //console.log('二维码生成成功:', html);
    if (props.info.visitNo) {
      try {
        QRCode.toDataURL(
          props.info.visitNo,
          (err: Error | null, url: string) => {
            if (err) {
              //console.error('二维码生成失败:', err);
              return;
            }
            qrCodeStr.value = url;
          }
        );
      } catch (err) {
        //console.error('二维码生成失败:', err);
      }
    }
  });
};
const getHtml = (uuid: string) => {
  // 获取dom9元素
  const dom9Element = document.getElementById(uuid);
  //console.log(dom9Element);
  
  if (!dom9Element) {
    //console.error('未找到打印元素');
    //ElMessage.error('未找到打印内容');
    return;
  }

  const htmlContent = dom9Element.innerHTML || '';
  return htmlContent;
};
defineExpose<{
  onPrintQRCode: () => void;
  getHtml: (value: any) => void;
}>({
  onPrintQRCode,
  getHtml,
});
</script>

<!-- 删除:<style scoped lang="scss">
.case-page {
  font-family: Arial, sans-serif;
  padding: 34px 30px;
  background-color: #fff;
  height: 100%;
}

.hospital-name {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}

.patient-info,
.footer {
  display: flex;
  flex-wrap: wrap;
}
.patient-info,
.case-info {
  border-bottom: 2px solid rgba(0, 0, 0, 0.9);
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.info-item {
  font-size: 12px;
  width: 24%;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.footer {
  .info-item {
    display: flex;
    width: auto;
  }
}
.footer2 {
  width: 180px;
  margin-left: auto;
  .info-item {
    display: flex;
    width: 100%;
    align-items: center;
    span {
      display: block;
    }
    .img {
      width: 120px;
      height: 40px;
      display: flex;
      justify-content: center;
      img {
        height: 40px;
      }
    }

    margin-bottom: 10px;
  }
}
.case-info {
  .info-item {
    display: flex;
    width: 100%;
    span {
      width: 50px;
      display: block;
    }
  }
  .cdp-table {
    font-size: 12px;
    text-align: left;
  }
}
.info-item span {
  text-align: justify;
  text-justify: inter-character;
  text-align-last: justify;
}

ul {
  list-style: none;
  padding: 0;
}
</style> -->
